<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>

<template>
<canvas id="myCanvas" width="360" height="650"></canvas>
</template>

<script>
import facecat from './facecat.js';
let gPaint = new facecat.FCPaint();

/*
 * 重置大小
 */
let resizeAll = function () {
	try {
		const canvas = document.getElementById('myCanvas');
		canvas.width = document.documentElement.clientWidth;
		canvas.height = document.documentElement.clientHeight;
		facecat.scaleCanvas(gPaint);
		facecat.updateViewDefault(gPaint.views);
	} catch (err) {
	}
	facecat.invalidate(gPaint);
};
	
export default { 
	data() {
		return {
		}
	},
	onLoad() {
	}, 
	mounted(){
			const canvas = document.getElementById('myCanvas');
			gPaint.isMobile = facecat.isMobileMode();
			window.addEventListener('resize', resizeAll, true);
			let context = canvas.getContext("2d"); //绘图上下文
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			gPaint.canvas = canvas;
			facecat.scaleCanvas(gPaint);
			//注册事件
			facecat.addDefaultEvent(canvas, gPaint);
			/*
			* 重绘背景的实现方法
			* view:视图
			* paint:绘图对象
			* clipRect:裁剪区域
			*/
			gPaint.onPaint = function (view, paint, clipRect) {
				facecat.onPaintDefault(view, paint, clipRect);
				if (view.viewName == "TabPage") {
					paint.drawLine("rgb(255,0,0)", 1, [], 100, 100, 300, 300);
					paint.drawLine("rgb(255,0,255)", 1, [5, 5], 100, 300, 300, 100);
				} else if (view.viewName == "TabPage2") {
					paint.drawRect("rgb(0,255,0)", 1, [], 100, 100, 200, 200);
					paint.fillRect("rgb(0,255,255)", 250, 250, 350, 350);
				} else if (view.viewName == "TabPage3") {
					paint.drawEllipse("rgb(0,255,255)", 1, [], 100, 100, 200, 200);
					paint.fillEllipse("rgb(255,0,255)", 250, 250, 350, 350);
				} else if (view.viewName == "TabPage4") {
					paint.drawText("FaceCat", "rgb(255,0,0)", "Default,30", 100, 100);
				} else if (view.viewName == "TabPage5") {
					paint.beginPath();
					paint.addLine(100, 100, 150, 120);
					paint.addLine(150, 120, 130, 200);
					paint.addLine(130, 200, 200, 200);
					paint.addLine(200, 200, 250, 220);
					paint.drawPath("rgb(255,0,0)", 1, []);
					paint.closePath();
				} else if (view.viewName == "TabPage6") {
					paint.beginPath();
					paint.addLine(100, 100, 150, 120);
					paint.addLine(150, 120, 200, 200);
					paint.addLine(200, 200, 150, 200);
					paint.fillPath("rgb(0,0,255)");
					paint.closePath();
				}
			};
			//解析加载XML
			let xml = `<?xml version="1.0" encoding="UTF-8"?>
			<html xmlns="facecat">
				<head>
				</head>
				<body>
					<div dock="fill" type="tab" selectedindex="0">
						<div name="TabPage" text="直线" type="tabpage" headersize="60,20"/>
						<div name="TabPage2" text="矩形" type="tabpage" headersize="60,20"/>
						<div name="TabPage3" text="圆" type="tabpage" headersize="60,20"/>
						<div name="TabPage4" text="文字" type="tabpage" headersize="60,20"/>
						<div name="TabPage5" text="折线" type="tabpage" headersize="60,20"/>
						<div name="TabPage6" text="多边形" type="tabpage" headersize="60,20"/>
					</div>
				</body>
			</html>
	`;
			facecat.renderFaceCat(gPaint, xml);	
			},
			methods: {  
	}
}
</script>
